<template>
  <el-menu :router="true" :default-active="this.$router.push.toString()" class="el-menu-demo" mode="horizontal"
    @select="handleSelect">
    <el-menu-item v-for="item in noChildren" :key="item.name" :index="item.name">
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'HeaderView',
  data() {
    return {
      MenuData: [{
        path: '/bookRecord',
        name: 'bookRecord',
        label: '预约挂号',
        index: 'bookRecord',
        url: '/bookRecord'
      },
      {
        path: '/expense',
        name: 'expense',
        label: '费用结算',
        index: 'expense',
        url: '/Expense'
      }],
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  computed: {
    noChildren() {
      return this.MenuData.filter(item => !item.Children)
    },
    hasChildren() {
      return this.MenuData.filter(item => item.Children)
    }
  }
}
</script>

<style></style>